<template>
  <div class="dashboard-editor-container appMainWarp">
    <el-form :inline="true" :model="searchKey" class="demo-form-inline">
      <el-form-item label="交易时间:">
        <el-date-picker
          v-model="searchKey.time"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        />
      </el-form-item>
      <el-form-item label="院区:">
        <el-select v-model="searchKey.hospital_area_no" placeholder="请选择">
          <el-option
            v-for="item in searchKey.Hospital"
            :key="item.area_code"
            :label="item.area_name"
            :value="item.area_code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="选择支付场景:">
        <el-select v-model="searchKey.system_no" multiple placeholder="请选择" clearable>
          <el-option
            v-for="item in searchKey.System"
            :key="item.pay_scene_no"
            :label="item.pay_scene_name"
            :value="item.pay_scene_no"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="dashboard-container">
      <div v-if="devData.item.abnormal">
        <zzj-card :items-info="devData" />
      </div>
      <div>
        <pie-chart-group key="registrationData-pie" :items-chart="registrationData.chart" />
      </div>
      <div v-if="barChart" class="barChart-flex">
        <bar-kiosk-chart-line :chart-data="barChart" />
        <bar-kiosk-chart-bar :chart-data="barChart" />
      </div>
      <div class="two-grop-bg">
        <line-chart-two-group :chart-data="kioskdata" />
      </div>
    </div>
  </div>
</template>

<script>
// import Income from './components/income'
import ZzjCard from './components/ZzjCard'
import PieChartGroup from './components/PieChartGroup'
import BarKioskChartLine from './components/components-group/LineList'
import BarKioskChartBar from './components/components-group/BarList'
import LineChartTwoGroup from './components/components-group/LineChartTwo'
import { getConfigType } from '@/api/transactRecords/index'
import { sectorData, recentData, topData } from '@/api/dashboard/index'

export default {
  name: 'DashboardAdmin',
  components: {
    ZzjCard,
    PieChartGroup,
    BarKioskChartBar,
    BarKioskChartLine,
    LineChartTwoGroup
  },
  data() {
    return {
      flag: false,
      registrationData: { // 统计占比
        item: {
          pay_arr: {},
          trans_arr: {}
        },
        chart: [],
        isShow: true
      },
      devData: {
        item: {}
      },
      // sectorData: {
      //   pay_arr: {},
      //   trans_arr: {}
      // },
      barChart: {},
      kioskdata: {}, // 八天统计
      searchKey: {
        time: '',
        // time: [this.utils.Format(new Date(), 'yyyy-MM-dd'), this.utils.Format(new Date(), 'yyyy-MM-dd')], // 账单日期
        hospital_area_no: '', // 选择院区
        Hospital: [],
        system_no: '', // 选择平台
        System: []
      },
      minDate: '',
      maxDate: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.minDate = minDate
          this.maxDate = maxDate
        },
        disabledDate: (time) => { // 查询时间跨度为365天
          if (this.minDate) {
            var range = 365 * 24 * 3600 * 1000
            return time.getTime() > Date.now() || time.getTime() > (this.minDate.getTime() + range) || time.getTime() < (this.minDate.getTime() - range)
          } else {
            return time.getTime() > Date.now()
          }
          // return time.getTime() > Date.now()
        }
      }
    }
  },
  watch: {
    'searchKey.time': {
      deep: true,
      handler(val) {
        if (val == null) {
          this.minDate = null
        }
      }
    }
  },
  mounted() {
    this.searchKey.time = this.utils.Foryest()
    this.getConfig()
    this.onLoad()
    this.getbarchart()
  },
  methods: {
    // 系统配置项
    getConfig() {
      var that = this
      var params = {}
      getConfigType(params)
        .then(res => {
          that.searchKey.Hospital = res.data.hospital
          that.searchKey.System = res.data.scene
        })
        .catch(() => {})
    },
    onLoad() {
      // this.page.currentPage = 1
      this.onSearch()
    },
    onSearch() {
      var params = {}
      var that = this
      if (that.searchKey.time && that.searchKey.time.length > 0) {
        params.startime = that.searchKey.time[0]
        params.endtime = that.searchKey.time[1]
      } else {
        params.startime = ''
        params.endtime = ''
      }
      params.sceneno = that.searchKey.system_no.toString()
      params.hospital = that.searchKey.hospital_area_no
      this.topDataFun(params)
      this.sectorDataFun(params)
      this.getbarchart()
    },
    // 饼图
    sectorDataFun(params) {
      sectorData(params).then(res => {
        this.registrationData.item.pay_arr = res.data.pay_arr
        this.registrationData.item.trans_arr = res.data.trans_arr
        this.initRegChart()
      })
        .catch(() => {
        })
    },
    // 头部数据
    topDataFun(params) {
      const loading = this.$loading()
      topData(params).then(res => {
        loading.close()
        this.devData.item = res.data
      })
        .catch(() => {
        })
    },
    // 8 天数据统计 柱状图
    getbarchart() {
      var params = {}
      var that = this
      params.sceneno = that.searchKey.system_no.toString()
      params.hospital = that.searchKey.hospital_area_no
      recentData(params).then(res => {
        var datas = {}
        var eigthDatas = {}
        Object.keys(res.data.pay_arr[0]).forEach((item) => {
          datas[item] = res.data.pay_arr.map((option) => option[item])
        })
        Object.keys(res.data.trans_arr[0]).forEach((item) => {
          eigthDatas[item] = res.data.trans_arr.map((option) => option[item])
        })
        that.barChart = datas
        that.kioskdata = eigthDatas
      })
        .catch(() => {
        })
    },
    initRegChart() {
      console.log(this.registrationData.item.trans_arr.negative_amount, '123')
      this.registrationData.chart = [
        {
          color: ['#25D096', '#FEAF53', '#6999F4'],
          id: 'pieChart1',
          titleButtom: '支付金额占比',
          title: {
            text: [
              '{value|' + this.registrationData.item.pay_arr.total_amount + '}',
              '{name|总金额}'
            ].join('\n'),
            subtext: '2000000.00',
            x: 'center',
            y: 'center'
          },
          subtext: '总价呢',
          series: [
            {
              type: 'pie',
              startAngle: 180,
              radius: ['40%', '75%'],
              data: [
                {
                  // value: parseFloat(
                  //   this.registrationData.pay_arr.wx_amount || '0'
                  // ),
                  value: this.registrationData.item.pay_arr.wx_amount || '0',
                  name: '微信',
                  label: {
                    normal: {
                      formatter: '{b}\n{c}元',
                      textStyle: {
                        color: '#fff' // 改变标示文字的颜色
                      }
                    }
                  }
                },
                {
                  // value: parseFloat(
                  //   this.devData.bank_pay_sum || '0'
                  // ),
                  value: this.registrationData.item.pay_arr.bank_amount || '0',
                  name: '银行卡',
                  label: {
                    normal: {
                      formatter: '{b}\n{c}元',
                      textStyle: {
                        color: '#fff' // 改变标示文字的颜色
                      }
                    }
                  }
                },
                {
                  // value: parseFloat(
                  //   this.devData.three_pay_sum || '0'
                  // ),
                  value: this.registrationData.item.pay_arr.ali_amount || '0',
                  name: '支付宝',
                  label: {
                    normal: {
                      formatter: '{b}\n{c}元',
                      textStyle: {
                        color: '#fff' // 改变标示文字的颜色
                      }
                    }
                  }
                }
              ],
              label: {
                // position: 'outside'
                position: 'inner'
              }
            }
          ]
        },

        {
          color: ['#25D096', '#408AFF', '#FEAF53'],
          id: 'pieChart2',
          titleButtom: '支付笔数占比',
          title: {
            text: '',
            subtext: '2000000.00',
            x: 'center',
            y: 'center'
          },
          series: [
            {
              type: 'pie',
              data: [
                {
                  // value: parseFloat(
                  //   this.devData.wx_total_num || '0'
                  // ),
                  value: this.registrationData.item.pay_arr.wx_num || '0',
                  name: '微信',
                  label: {
                    normal: {
                      formatter: '{b}\n{c}笔',
                      textStyle: {
                        color: '#fff', // 改变标示文字的颜色
                        fontSize: 14
                      }
                    }
                  }
                },
                {
                  // value: parseFloat(
                  //   this.devData.alipay_total_num || '0'
                  // ),
                  value: this.registrationData.item.pay_arr.ali_num || '0',
                  name: '支付宝',
                  label: {
                    normal: {
                      formatter: '{b}\n{c}笔',
                      textStyle: {
                        color: '#fff' // 改变标示文字的颜色
                      }
                    }
                  }
                },
                {
                  // value: parseFloat(
                  //   this.devData.bank_total_num || '0'
                  // ),
                  value: this.registrationData.item.pay_arr.bank_num || '0',
                  name: '银行卡',
                  label: {
                    normal: {
                      formatter: '{b}\n{c}笔',
                      textStyle: {
                        color: '#fff' // 改变标示文字的颜色
                      }
                    }
                  }
                }
              ],
              label: {
                position: 'inner'
              }
            }
          ]
        },
        {
          color: ['#9E87FF', '#3DC4E3'],
          id: 'pieChart3',
          title: {
            text: '',
            subtext: '2000000.00',
            x: 'center',
            y: 'center'
          },
          titleButtom: '交易类型金额占比',
          series: [
            {
              type: 'pie',
              startAngle: 180,
              radius: ['40%', '75%'],
              // center: ['50%', '60%'],
              // itemStyle: {
              //   emphasis: {
              //     shadowBlur: 10,
              //     shadowOffsetX: 0,
              //     shadowColor: 'rgba(0, 0, 0, 0.5)'
              //   }
              // },
              data: [
                {
                  value: parseFloat(
                    this.registrationData.item.trans_arr.trade_amount || '0'
                  ),
                  // value: this.registrationData.item.trans_arr.trade_amount || '0',
                  name: '正交易',
                  label: {
                    normal: {
                      formatter: '{b}\n{c}元',
                      textStyle: {
                        color: '#fff' // 改变标示文字的颜色
                      }
                    }
                  }
                },
                {
                  value: parseFloat(
                    this.registrationData.item.trans_arr.negative_amount || '0'
                  ),
                  // value: this.registrationData.item.trans_arr.negative_amount || '0',
                  name: '负交易',
                  label: {
                    normal: {
                      formatter: '{b}\n{c}元',
                      textStyle: {
                        color: '#fff' // 改变标示文字的颜色
                      }
                    }
                  }
                }
              ],
              label: {
                position: 'inner'
              }
            }
          ]
        },

        {
          color: ['#CF8FF8', '#3DC4E3'],
          id: 'pieChart4',
          title: {
            text: '',
            subtext: '2000000.00',
            x: 'center',
            y: 'center'
          },
          titleButtom: '交易类型笔数占比',
          series: [
            {
              type: 'pie',
              data: [
                {
                  // value: parseFloat(
                  //   this.devData.trade_total_num || '0'
                  // ),
                  value: this.registrationData.item.trans_arr.trade_num || '0',
                  name: '正交易',
                  label: {
                    normal: {
                      formatter: '{b}\n{c}笔',
                      textStyle: {
                        color: '#fff' // 改变标示文字的颜色
                        // fontSize: 14
                      }
                    }
                  }
                },
                {
                  // value: parseFloat(
                  //   this.devData.netative_pay_num || '0'
                  // ),
                  value: this.registrationData.item.trans_arr.negative_num || '0',
                  name: '负交易',
                  label: {
                    normal: {
                      formatter: '{b}\n{c}笔',
                      textStyle: {
                        color: '#fff' // 改变标示文字的颜色
                        // fontSize: 14
                      }
                    }
                  }
                }
              ],
              label: {
                position: 'inner'
              }
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 20px 20px;
  background-color: #EFEEF3;
  position: relative;
  .dashboard-container{
    background:rgba(250,250,251,1);
    padding: 43px 31px;
  }
}
.barChart-flex{
  display: flex;
  background: #fff;
  padding: 30px;
  margin-top: 40px;
}
.two-grop-bg{
  background: #fff;
  padding: 30px;
  margin-top: 40px;
}
</style>
